<template>
  <div class="fullMain">
    <x-header
      class="custumHeader"
      :left-options="{backText: '',showBack: false}">
      <a slot="left">
        <i slot="overwrite-left" class="lIcon">X</i>
      </a>
      <span>日报-条件查看</span>
      <a slot="right">
        <x-icon slot="overwrite-right" type="ios-more" size="35" style="position:relative;top:-8px;left:-3px;"></x-icon>
      </a>
    </x-header>
    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
        <span class="ids">
          学号：2017223012345
          <i class="fa fa-share-alt icons"></i>
        </span>
      </div>
      <group class="times">
        <calendar :readonly="readonly" v-model="selStartVal" :title="startTitle" disable-past :placeholder="sPlaceholder" @on-show="log('show')" @on-hide="log('hide')"></calendar>
      </group>
      <group class="times">
        <calendar :readonly="readonly" v-model="selEndVal" :title="endTitle" disable-past :placeholder="ePlaceholder" @on-show="log('show')" @on-hide="log('hide')"></calendar>
      </group>
      <div style="display: flow-root;margin-bottom: 20px;">
        <button type="button" class="affirmBtn affirmBtn_small groupBBtn fr sViewbtn" @click="getData">查看</button>
      </div>
      <div class="pieDiv" :class="displayNone">
        <scroller height="100%" width="100%" scrollbar-y lock-x class="chartSrcoll">
          <div class="chartDiv">
              <div class="pieChart">
                <pie></pie>
              </div>
              <div class="pieDetial">
                <span class="titles">张三该阶段所花总时间：</span>
                <div>
                  <span>项目：**h</span>
                  <span>学习：**h</span>
                </div>
                <div style="margin-bottom: 20px;">
                  <span>锻炼：**h</span>
                  <span>其他：**h</span>
                </div>
                <span class="more">查看明细></span>
              </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { XInput } from 'vux'
  import { Scroller } from 'vux'
  import { Group, Calendar,PopupPicker} from 'vux'
  import pie from '../components/common/pie'
  export default {
    name: "S_summary_pie",
    data(){
      return{
        readonly: false,
        startTitle:"起始：",
        endTitle:"截止：",
        sPlaceholder:"选择起始时间",
        ePlaceholder:"选择截止时间",
        projectStart:"起",
        projectEnd:"止",
        selStartVal:"",
        selEndVal:"",
        displayNone:"displayNone",
        legendOptions: {
          position: 'right',
          itemFormatter (val) {
            return val + '  ' + map[val]
          }
        },
        yOptions: {
          formatter (val) {
            return val * 100 + '%'
          }
        },
      }
    },
    components:{
      XHeader,
      XInput,
      Scroller,
      Group,
      Calendar,
      PopupPicker,
      pie
    },
    methods:{
      back(){
         this.$router.go(-1);
      },
      onChange (val) {
        console.log('val change', val)
      },

      log (str) {
        console.log(str)
      },
      onHide () {
        console.log('on hide')
      },
      onShow () {
        console.log('on show')
      },
      getData(){
        this.displayNone = '';
      }
    }
  }
</script>

<style>

</style>
